import { TableConfigInit } from '@/shared/class'
import { FormType } from '@/shared/enum'
import { h } from 'vue'
import { ElButton, ElImage } from 'element-plus'
import { UserClass } from './controller'
import { Delete } from '@element-plus/icons-vue'

export class ConfigClass {
	userClass
	constructor(userClass: UserClass) {
		this.userClass = userClass
	}
	public config = new TableConfigInit()
	public tableConfig = {
		...this.config.getDefaultConfig(),
		sortLabel: '序号',
		pagination: {
			currentPage: 1,
			pageSize: 10,
			onPageChange: () => this.userClass.onPageChange()
		},
		columns: [
			{
				label: '作者名',
				key: 'username'
			},
			{
				label: '角色',
				key: 'role'
			},
			{
				label: '个人介绍',
				key: 'nickname'
			},
			{
				label: '作者头像',
				key: 'img',
				slotComponent: scope => {
					return h(ElImage, {
						loading: 'lazy',
						previewTeleported: true,
						previewSrcList: [`http://ikun-pro-ui.fun:3000/static/${scope.row.img}`],
						fit: 'cover',
						src: `http://ikun-pro-ui.fun:3000/static/${scope.row.img}`,
						style: { width: '40px', height: '40px', borderRadius: '100%', border: '1px solid #ccc' }
					})
				}
			},
			{
				label: '创建时间',
				key: 'createdAt'
			},
			{
				label: '操作',
				key: 'operate',
				slotComponent: scope => {
					return h('div', [
						h(ElButton, {
							type: 'danger',
							circle: true,
							icon: Delete,
							title: '删除',
							disabled: scope.row.disabeld,
							onClick: () => {
								this.userClass.delete(scope.row.id)
							}
						})
					])
				}
			}
		]
	}

	public searchCol = [
		{
			label: '姓名',
			key: 'username',
			value: '',
			type: FormType.INPUT
		},
		{
			label: '昵称',
			key: 'nickname',
			value: '',
			type: FormType.INPUT
		}
	]

	public formCol = [
		{
			label: '姓名',
			key: 'username',
			value: '',
			type: FormType.INPUT,
			span: 24,
			rules: [
				{
					required: true,
					message: '请填写'
				}
			]
		},
		{
			label: '密码',
			key: 'password',
			value: '',
			type: FormType.PASSWORD,
			span: 24,
			rules: [
				{
					required: true,
					message: '请填写'
				}
			]
		},
		{
			label: '角色',
			key: 'role',
			value: '',
			type: FormType.SELECT,
			span: 24,
			rules: [
				{
					required: true,
					message: '请选择'
				}
			],
			options: [
				{
					label: '超级管理员',
					value: 'admin'
				},
				{
					label: '普通用户',
					value: 'normal'
				}
			]
		}
	]

	public btns = [
		{
			label: '取消',
			key: 'cancel',
			click: () => {
				this.userClass.cancel()
			}
		},
		{
			label: '确认',
			type: 'primary',
			click: () => {
				this.userClass.confirm()
			}
		}
	]
}
